<!--
 * @Description: 登录
 * @Author: 李沛韬(lipeitao1002@163.com)
 * @Date: 2020-12-11 16:19:42
 * @LastEditors: 李沛韬(lipeitao1002@163.com)
 * @LastEditTime: 2020-12-14 17:47:14
-->
<template>
  <div>
    <div class="loginWrap">
      <h3 class="title"></h3>
      <div class="loginBox">
        <div class="formWrap">
          <div class="inputWrap userName">
            <input type="text" placeholder="请输入您的账号" v-model="username" />
          </div>
          <div class="inputWrap passWord">
            <input type="password" placeholder="请输入密码" v-model="userpass" />
          </div>
          <div class="inputWrap verification">
            <input type="text" placeholder="请输入验证码" @keyup.enter="submit" v-model="veriCode"/>
            <div class="verificationCode" @click="createCode">{{verificationCode}}</div>
          </div>
        </div>
        <span class="btn" @click="submit">登录</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username:"", //用户名
      userpass:"", //密码
      veriCode:"", //验证码
      verificationCode: "" //验证码
    };
  },
  methods: {
    // 随机生成验证码
    createCode() {
      let code = "Hmf";
      for (let i = 0; i < 2; i++) {
        code += Math.floor(Math.random() * 10);
      }
      this.verificationCode = code;
    },
    //登录
    submit() {
      if(this.username == ""){
        this.$message.error('请输入用户名');
        return false
      }
      if(this.userpass == ""){
        this.$message.error('请输入密码');
        return false
      }
      if(this.veriCode == ""){
        this.$message.error('请输入验证码');
        return false
      }
      if(this.veriCode != this.verificationCode){
        this.$message.error('验证码不正确');
        return false
      }
      localStorage.setItem("token",this.username);
      this.$router.push("/");
    }
  },
  created() {
    this.createCode();
  }
};
</script>

<style lang="scss" scoped>
.loginWrap {
  * {
    box-sizing: border-box;
  }
  height: 100%;
  overflow: hidden;
  background: url("../../assets/img/login/img_bg@2x.png") no-repeat center
    center;

  .title {
    margin-top: 80px;
    height: 60px;
    background: url("../../assets/img/login/title@2x.png") no-repeat center
      center;
  }
  .loginBox {
    position: relative;
    margin: 210px auto;
    width: 560px;
    height: 300px;
    background: url("../../assets/img/login/img@2x.png") no-repeat center center;
    .formWrap {
      padding-top: 52px;
      padding-left: 52px;
    }
    .inputWrap {
      margin-bottom: 8px;
      width: 400px;
      height: 60px;
      padding: 14px 20px 14px 60px;
      background-repeat: no-repeat;
      background-position: 25px 20px;
      background-color: #8b9cbe;
      border-radius: 6px;

      &.userName {
        background-image: url("../../assets/img/login/icon_account@2x.png");
      }
      &.passWord {
        background-image: url("../../assets/img/login/icon_password@2x.png");
      }
      &.verification {
        background-image: url("../../assets/img/login/icon_verification@2x.png");
        position: relative;
        width: 260px;
        .verificationCode {
          position: absolute;
          top: 0;
          right: -140px;
          width: 128px;
          height: 100%;
          cursor: pointer;
          background-color: #5e6f93;
          border-radius: 6px;
          font-size: 24px;
          line-height: 60px;
          text-align: center;
        }
      }
      input {
        width: 100%;
        height: 100%;
        border: 0;
        outline: none;
        border-left: 1px solid #394757;
        background-color: transparent;
        padding-left: 20px;
        color: #35384e;
        font-size: 16px;
        line-height: 32px;
      }
    }
    .btn {
      position: absolute;
      width: 136px;
      height: 124px;
      right: -49px;
      top: 73px;
      border-radius: 50%;
      background: url("../../assets/img/login/btn@2x.png") no-repeat center
        center;
      background-size: cover;
      font-size: 20px;
      line-height: 124px;
      text-align: center;
      color: #87e0f6;
    }
  }
}
</style>